<!DOCTYPE html> 
<html>
  <head>
	<!--META-->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=0.75">

	<!--CSS-->
	<link rel="stylesheet" href="API/css/themes/default/jquery.mobile.min.css" />
	<link rel="stylesheet" href="API/css/themes/default/jquery.mobile.structure.min.css" />
	<link rel="stylesheet" href="API/css/themes/default/jquery.mobile.theme.min.css" />
	<link rel="stylesheet" href="API/css/mycss.css" />
	<link rel="stylesheet" href="css/mycss.css" />
	
	<!--JS-->
	<script type="text/javascript" src="API/js/jquery.min.js"></script>
	<script type="text/javascript" src="API/js/jquery.mobile.min.js"></script>
	<script type="text/javascript" src="API/js/highcharts.js"></script>
    <script type="text/javascript" src="API/js/modules/exporting.js"></script>
	<script type="text/javascript" src="API/js/fonctions.js"></script>
	<script type="text/javascript" src="js/fonctions.js"></script>
	
	<script language="javascript" type="text/javascript">
		///////////////////
		//BLOCK VARIABLE GLOBAL
		///////////////////
		var id_page = 6;

        var tab_percent_activite = new Array();
		var tab_percent_page_activite = new Array();
	
		///////////////////
		//BLOCK FONCTIONS EVENEMENTS
		///////////////////
        
		$(document).on('pageinit',function() {
		    try {
		        // Init commun
				init_commun();

				// Init page
		        afficherActivite();
				afficherPageActivite();
            }
            catch (er) {
                log(0, "ERROR(init_stats):" + er.message);
            }
        });
		
		$(document).on('pageshow',function() {
			try {
				show_commun();
			}
			catch (er) {
				log(0, "ERROR(show):" + er.message);
			}
		});
		
		
		///////////////////
		//BLOCK FONCTIONS METIER
		///////////////////

        function afficherActivite() {
            try {
                var tab = new Array();
                tab = getUserActivite();
                var total  = 0;

                for (var indice in tab) {
                    tab[indice][1] = parseInt(tab[indice][1]);
                    total += tab[indice][1];
                }

                for (var indice in tab) {
                    tab_percent_activite[tab[indice][0]] = Math.round(tab[indice][1] / total * 100 * 100) / 100;
                }

                afficheActivite(tab);
            }
            catch (er) {
                log(0, "ERROR(afficherActivite):" + er.message);
            }
        }
		
		function afficherPageActivite() {
            try {
                var tab = new Array();
                tab = getPageActivite();
                var total  = 0;

                for (var indice in tab) {
                    tab[indice][1] = parseInt(tab[indice][1]);
                    total += tab[indice][1];
                }

                for (var indice in tab) {
                    tab_percent_page_activite[tab[indice][0]] = Math.round(tab[indice][1] / total * 100 * 100) / 100;
                }

                affichePageActivite(tab);
            }
            catch (er) {
                log(0, "ERROR(afficherPageActivite):" + er.message);
            }
        }
		
		///////////////////
		//BLOCK FONCTIONS BD
		///////////////////
		
		
		///////////////////
		//BLOCK FONCTIONS AFFICHAGE
		///////////////////
		function affichePageActivite(tabData) {
            var chart;

            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    exporting: {
                        url: 'http://export.highcharts.com',
                        filename: 'pageActivite',
						width: 1600
                    },
                    chart: {
                        renderTo: 'divPageActivitePie',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'R\351partition de l\'activit\351 par page'
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>' + this.point.name + '</b>: ' + this.y + ', ' + tab_percent_page_activite[this.point.name] + '%';
                        }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function() {
                                    return '<b>' + this.point.name + '</b>: ' + this.y + ', ' + tab_percent_page_activite[this.point.name] + '%';
                                }
                            }
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: 'Browser share',
                        data: tabData
						}]
                    });
                }
			);
        }

        function afficheActivite(tabData) {
			var chart;

			$(document).ready(function() {
				chart = new Highcharts.Chart({
					exporting: {
						url: 'http://export.highcharts.com',
						filename: 'utilisateurActivite',
						width: 1600
					},
					chart: {
						renderTo: 'divActivitePie',
						plotBackgroundColor: null,
						plotBorderWidth: null,
						plotShadow: false
					},
					title: {
						text: 'R\351partition de l\'activit\351 par utilisateur'
					},
					tooltip: {
						formatter: function() {
							return '<b>' + this.point.name + '</b>: ' + this.y + ', ' + tab_percent_activite[this.point.name] + '%';
						}
					},
					plotOptions: {
						pie: {
							allowPointSelect: true,
							cursor: 'pointer',
							dataLabels: {
								enabled: true,
								color: '#000000',
								connectorColor: '#000000',
								formatter: function() {
									return '<b>' + this.point.name + '</b>: ' + this.y + ', ' + tab_percent_activite[this.point.name] + '%';
								}
							}
						}
					},
					series: [{
						type: 'pie',
						name: 'Browser share',
						data: tabData
						}]
					});
				}
			);
		}
			
    </script>
	
  </head>
  <body>
    
	<!-- page -->
	<div data-role="page">
	
		<!-- /panel -->
		<div data-role="panel" id="mypanel" data-display="overlay" data-position="left">

		</div>
		<!-- /panel -->
	
		<!-- header -->
		<div data-role="header" data-position="fixed" data-theme="c">
			<a href="#mypanel" data-role="button" data-icon="home" data-iconpos="notext">home</a>
			<h1 id="id_titre">titre</h1>
			<a href="javascript:window.location = ('./page_contact.html?mili='+getMilise());" data-role="button" data-icon="info" data-iconpos="notext">Contact</a>
		</div>
		<!-- /header -->

		<!-- content -->
		<div data-role="content" data-theme="c" id="main_content">
			
			<div data-role="collapsible" data-theme="c" data-content-theme="c" data-collapsed="false" data-mini="true">
				<h3>R&eacute;partition de l'activit&eacute; par utilisateur</h3>
				<div id="divActivitePie">Pas de r&eacute;sultat.</div>
			</div>		

			<div data-role="collapsible" data-theme="c" data-content-theme="c" data-collapsed="false" data-mini="true">
				<h3>R&eacute;partition de l'activit&eacute; par page</h3>
				<div id="divPageActivitePie">Pas de r&eacute;sultat.</div>
			</div>
			
		</div>
		<!-- /content -->
		
		<!-- footer -->
		<div data-role="footer" data-position="fixed" data-theme="c">
			<a data-role="button" data-icon="search" data-iconpos="notext" class="ui-btn-left" href="javascript:window.location = ('./page_faq.html?mili='+getMilise());">FAQ</a>
			<h1 id="id_affichageUser">User</h1>
			<a data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" data-theme="c" href="javascript:window.location = ('./page_sortie.html?mili='+getMilise());">Logout</a>
		</div>
		<!-- /footer -->
		
	</div>
	<!-- /page -->
</body>
</html>